<template>
  <div>
    <div ref="toolbar" />
    <textarea placeholder="请输入正文 (限制在200-20000字以内)" ref="editor" />
    <div class="buffer-render_item" ref="bufferRender" style="display:none" v-html="editorData" />
  </div>
</template>

<script>
import Simditor from 'simditor';
import 'simditor/styles/simditor.css';
import setting from '@/settings';
import { getToken, getClient } from '@/utils/auth';

export default {
    data() {
        return {
            editor: null,
            editorData: '',
            /** @type {IntersectionObserver} toolbarFloatIO */
            toolbarFloatIO: null,
        };
    },
    mounted() {
        this.initEditor(); // 实例化编辑器
        this.editorChangeBind(); // 绑定编辑器内容变动事件
        this.editorUploadCompleteBind(); // 绑定编辑器上传图片成功事件
        this.toolbarFloat(); // 开启编辑器工具栏的交叉观察器
    },
    destroyed() {
        this.toolbarFloatIO.disconnect(); // 销毁编辑器工具栏的交叉观察器
        this.editor.destroy(); // 销毁编辑器
    },
    methods: {
        initEditor() {
            const options = {
                textarea: this.$refs.editor,
                defaultImage: 'http://placehold.it/200x200',
                toolbarFloat: true,
                toolbarFloatOffset: 100,
                pasteImage: true,
                upload: {
                    url: `${setting.baseURL.KujoMiva}/oss/uploader`,
                    params: {
                        client: getClient(),
                        dir: '/editor',
                        authorization: `Bearer ${getToken()}`,
                    },
                    fileKey: 'file',
                    connectionCount: 1,
                    leaveConfirm: '离开当前页面会丢失编辑数据, 确认离开?',
                },
                toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'hr', 'indent', 'outdent', 'alignment'],
            };
            this.editor = new Simditor(options);
        },
        editorChangeBind() {
            this.editor.on('valuechanged', () => {
                const content = this.editor.getValue();
                this.editorData = content;
                this.$emit('change', content);
            });
        },
        editorUploadCompleteBind() {
            this.editor.uploader.on('uploadsuccess', (...arg) => {
                const uploadResult = arg[2];
                const { data } = uploadResult.result.data; // 这个就是附件资源的信息了
                this.$emit('upload', data); // 抛给它爸爸去解决
            });
        },
        toolbarFloat() {
            const toolbar = document.querySelector('.simditor-toolbar');
            const toolbarItem = document.querySelector('.simditor-toolbar ul');
            toolbar.style.height = `${toolbarItem.offsetHeight}px`;
            this.toolbarFloatIO = new IntersectionObserver(([entries]) => {
                toolbar.className = entries.isIntersecting ? 'simditor-toolbar' : 'simditor-toolbar toolbarFixed';
            }, {});
            this.toolbarFloatIO.observe(this.$refs.toolbar);
        },
        renderValue(value) {
            this.editor.setValue(value);
        },
    },
};
</script>

<style lang="scss">
.simditor {
  border: 0;
}
.toolbarFixed > ul {
  width: $baseWidth - 2px !important;
  position: fixed;
  top: 100px;
  z-index: 2;
  box-shadow: 0 3px 3px -2px #ddd;
  background-color: #fff;
  animation: toolbarFixedShow 0.3s forwards;
}
@keyframes toolbarFixedShow {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}
</style>
